<template>
  <view class="wallet">
    <view class="wallet-top">
      <view class="money">
        <view class="accumulate flex-center-center">
          <text class="num">{{userinfo.all_money}}</text>
          <text class="word">累计收益(元)</text>
        </view>
        <view class="line"></view>
        <view class="remain flex-center-center">
          <text class="num">{{userinfo.balance}}</text>
          <text class="word">余额(元)</text>
        </view>
      </view>
      <view @click="toWithdrawal" class="btn">
        提现
      </view>
    </view>
    <view class="revenueDetails">
      <view class="title">收益明细</view>
      <scroll-view :style="{'height':  'calc('+ screenHeight  +'px' +' ' + '-' +' ' +'442rpx)'}" @scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh" @refresherrestore="onRestore" class="scrollView" scroll-y="true">
        <view class="scrollCont">
          <view v-for="(item,index) in list" :key="index" class="scrollCont-part">
            <view v-if="item.addsub==1" class="comeIn flex-center-between">
              <view class="detail">
                <view style="" class="row">
                  <text class="row-left">
                    用户昵称
                  </text>
                  <text class="row-right exceedingEllipsis">
                    {{item.nickname}}
                  </text>
                </view>
                <view style="margin-top:16rpx" class="row">
                  <text class="row-left">
                    金额来源
                  </text>
                  <text class="row-right exceedingEllipsis">
                    {{item.remark}}
                  </text>
                </view>
                <view style="margin-top:16rpx" class="time">
                  {{item.createtime}}
                </view>
              </view>
              <view class="result">
                +{{item.price}}
              </view>
            </view>
            <view v-else class="other flex-center-between">
              <view class="detail">
                <view style="" class="row">
                  <text class="row-left">
                    金额支出
                  </text>
                  <text v-if="item.status==3" class="row-right">
                    提现失败
                  </text>
                  <text v-if="item.status==2" class="row-right">
                    提现成功
                  </text>
                  <text v-if="item.status==1" class="row-right">
                    提现中
                  </text>
                </view>
                <view style="margin-top:32rpx" class="time">
                  {{item.createtime}}
                  <!-- {{item.examine_date}} -->
                </view>
              </view>
              <view class="success" v-if="item.status==2">-{{item.price}}</view>
              <view class="fail" v-if="item.status==3" @click.stop="showWin(item)">查看原因</view>
              <view class="wait" v-if="item.status==1">审核中</view>
            </view>
          </view>
          <view class="nodata-st" v-if="form.page==form.last_page"> ------没有更多数据了------</view>
          <view class="nodata-st" v-if="list.length ==0"> ------暂无数据------</view>
          <view style="height:24rpx;"></view>
        </view>
      </scroll-view>
    </view>

    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>
  </view>
</template>

<script>

import api from '@/api/index.js';
export default {
  data() {
    return {
      triggered: true,
      screenHeight: '',
      list: [],
      form: {
        page: 1,
        page_size: 10,
        last_page: 0,
      },
      userinfo: {},
      contractObj: {
        title: '失败原因',
        content: '',
        isShow: false,
        showBotton: false,
        cancelText: '否',
        confirmText: '确认',
        showOneBotton: true
      },
    }
  },
  onShow() {
    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom;
    this._freshing = false;
    setTimeout(() => {
      this.triggered = true;
    }, 1000)
    this.init()
    this.getMyInfo()
  },
  methods: {
    init() {
      this.form.page = 1;
      this.form.last_page = 0;
      this.getpage()
    },

    getMyInfo() {
      api.base.getMyInfo().then(res => {
        if (res.code == 1) {
          this.userinfo = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    getpage() {
      api.base.getUserfundList({ ...this.form, ...this.query }).then(res => {
        if (res.code == 1) {
          this.list = this.form.page === 1 ? res.data.data : this.list.concat(res.data.data);
          this.form.last_page = res.data.last_page;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      setTimeout(() => {
        this.init()
        this.triggered = false;
        this._freshing = false;
      }, 1000)
    },
    onRestore() {
      this.triggered = 'restore'; // 需要重置
      console.log("onRestore");
    },
    scrolltolower() {
      if (this.form.page < this.form.last_page) {
        this.form.page += 1;
        this.getpage();
      }
    },
    toWithdrawal() {
      uni.navigateTo({
        url: '/pages/my/wallet/withdrawal'
      })
    },
    cancel(e) {
      this.contractObj.isShow = false
    },
    confirm(e) { // third_uid

      this.contractObj.isShow = false
    },
    showWin(item, index) {
      this.contractObj.content = item.fail_reason
      this.contractObj.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.wallet {
  padding-top: 24rpx;
  &-top {
    width: 686rpx;
    height: 306rpx;
    background: linear-gradient(135deg, #ff7c7c 0%, #9747ff 100%);
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 86, 91, 0.16);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin: 0 auto;
    margin-bottom: 24rpx;
    padding: 0 16rpx;
    box-sizing: border-box;

    .money {
      display: flex;
      align-items: center;
      padding: 48rpx 0 40rpx 0;

      .accumulate,
      .remain {
        flex-direction: column;
        width: 301rpx;
        height: 98rpx;

        .num {
          height: 56rpx;
          font-size: 40rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 47rpx;
        }

        .word {
          height: 34rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.8);
          line-height: 28rpx;
        }
      }

      .line {
        width: 4rpx;
        height: 68rpx;
        background: #ffffff;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        opacity: 0.2;
      }
    }

    .btn {
      width: 442rpx;
      height: 88rpx;
      background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.62) 100%
      );
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #6d0cf7;
      margin: 0 auto;
      z-index: 999;
    }
  }

  .revenueDetails {
    .title {
      width: 750rpx;
      height: 88rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border-bottom: 1rpx solid #e6e6e6;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 88rpx;
      padding-left: 32rpx;
      box-sizing: border-box;
    }

    .scrollView {
      background: #ffffff;

      .scrollCont {
        &-part {
          width: 654rpx;
          border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
          margin: 0 auto;
          padding: 24rpx 0;

          .comeIn {
            width: 100%;

            .detail {
              width: 416rpx;
            }

            .result {
              font-size: 30rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: #ff2544;
              line-height: 35rpx;
            }
          }

          .other {
            width: 100%;

            .success {
              font-size: 30rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: #1dba3e;
              line-height: 35rpx;
            }

            .fail {
              width: 116rpx;
              height: 40rpx;
              background: rgba(109, 12, 247, 0.1);
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              border: 2rpx solid #6d0cf7;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #6d0cf7;
              line-height: 40rpx;
              text-align: center;
            }

            .wait {
              width: 116rpx;
              height: 40rpx;
              background: rgba(249, 174, 61, 0.1);
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              opacity: 1;
              border: 2rpx solid #f9ae3d;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #f9ae3d;
              line-height: 40rpx;
              text-align: center;
            }
          }

          .row {
            display: flex;
            align-items: center;
            height: 40rpx;

            &-left {
              font-size: 28rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              flex-shrink: 0;
            }

            &-right {
              width: 320rpx;
              margin-left: 32rpx;
              font-size: 28rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #999999;
            }
          }

          .time {
            height: 40rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 33rpx;
          }
        }
      }
    }
  }
}
</style>